import React, { useState } from "react";
import {
  Button,
  Card,
  Divider,
  Typography,
  Form,
  Input,
  Select,
  Radio,
  Space,
  Checkbox,
  Alert,
  Tabs,
} from "antd";
import {
  UserOutlined,
  MailOutlined,
  TeamOutlined,
  SmileOutlined,
  SolutionOutlined,
  CheckCircleOutlined,
} from "@ant-design/icons";
import SteppedModal from "../components/SteppedModal";
import type { StepConfig } from "../components/SteppedModal";
import "./styles/SteppedModalDemo.less";

const { Title, Paragraph, Text } = Typography;
const { Option } = Select;
const { TabPane } = Tabs;

const SteppedModalDemo: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const [secondForm] = Form.useForm();
  const [activeTab, setActiveTab] = useState("basic");

  // 基本示例的步骤
  const basicSteps: StepConfig[] = [
    {
      title: "选择文件",
      content: (
        <Form form={form} layout="vertical" requiredMark="optional">
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: "请输入邮箱" },
              { type: "email", message: "请输入有效的邮箱地址" },
            ]}
          >
            <Input prefix={<MailOutlined />} placeholder="请输入邮箱" />
          </Form.Item>
        </Form>
      ),
      nextDisabled: false,
    },
    {
      title: "参数设置",
      content: (
        <Form form={form} layout="vertical">
          <Form.Item name="theme" label="界面主题">
            <Radio.Group>
              <Radio value="light">浅色</Radio>
              <Radio value="dark">深色</Radio>
              <Radio value="system">跟随系统</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="lang" label="语言">
            <Select placeholder="请选择语言">
              <Option value="zh">中文</Option>
              <Option value="en">English</Option>
            </Select>
          </Form.Item>
        </Form>
      ),
    },
  ];

  // 高级示例的步骤
  const advancedSteps: StepConfig[] = [
    {
      title: "选择项目",
      description: "选择要创建的项目类型",
      content: (
        <Form form={secondForm} layout="vertical">
          <Form.Item
            name="projectType"
            label="项目类型"
            rules={[{ required: true, message: "请选择项目类型" }]}
          >
            <Radio.Group>
              <Space direction="vertical">
                <Radio value="web">
                  <div className="project-option">
                    <div className="project-option-title">Web 应用</div>
                    <div className="project-option-desc">
                      创建一个 Web 前端项目
                    </div>
                  </div>
                </Radio>
                <Radio value="mobile">
                  <div className="project-option">
                    <div className="project-option-title">移动应用</div>
                    <div className="project-option-desc">
                      创建一个移动应用项目
                    </div>
                  </div>
                </Radio>
                <Radio value="desktop">
                  <div className="project-option">
                    <div className="project-option-title">桌面应用</div>
                    <div className="project-option-desc">
                      创建一个桌面客户端项目
                    </div>
                  </div>
                </Radio>
              </Space>
            </Radio.Group>
          </Form.Item>
        </Form>
      ),
      icon: <SolutionOutlined />,
      nextDisabled: !secondForm.getFieldValue("projectType"),
    },
    {
      title: "基础配置",
      description: "项目基础配置",
      content: (
        <Form form={secondForm} layout="vertical">
          <Form.Item
            name="projectName"
            label="项目名称"
            rules={[{ required: true, message: "请输入项目名称" }]}
          >
            <Input placeholder="请输入项目名称" />
          </Form.Item>
          <Form.Item name="description" label="项目描述">
            <Input.TextArea placeholder="请输入项目描述" rows={4} />
          </Form.Item>
          <Form.Item name="features" label="项目功能">
            <Checkbox.Group
              options={[
                { label: "用户认证", value: "auth" },
                { label: "数据可视化", value: "visualization" },
                { label: "多语言支持", value: "i18n" },
                { label: "离线支持", value: "offline" },
              ]}
            />
          </Form.Item>
        </Form>
      ),
      icon: <TeamOutlined />,
    },
    {
      title: "确认创建",
      description: "确认项目信息",
      content: (
        <div className="confirm-step">
          <Alert
            message="准备创建项目"
            description="我们将根据您的配置创建项目。创建后，您可以随时修改这些配置。"
            type="info"
            showIcon
          />
          <div className="confirm-info">
            <Text>项目配置信息：</Text>
            <pre className="confirm-data">
              {JSON.stringify(
                {
                  projectType: secondForm.getFieldValue("projectType"),
                  projectName: secondForm.getFieldValue("projectName"),
                  description: secondForm.getFieldValue("description"),
                  features: secondForm.getFieldValue("features"),
                },
                null,
                2
              )}
            </pre>
          </div>
        </div>
      ),
      icon: <CheckCircleOutlined />,
    },
  ];

  // 处理步骤变化
  const handleStepChange = (current: number, next: number) => {
    // 基础示例中，在第一步到第二步时验证表单
    if (activeTab === "basic" && current === 0 && next === 1) {
      return form
        .validateFields()
        .then(() => true)
        .catch(() => false);
    }

    // 高级示例中，在第一步到第二步时验证表单
    if (activeTab === "advanced" && current === 0 && next === 1) {
      return secondForm
        .validateFields(["projectType"])
        .then(() => true)
        .catch(() => false);
    }

    // 其他情况允许切换
    return true;
  };

  const showModal = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleFinish = () => {
    console.log("Basic form values:", form.getFieldsValue());
    console.log("Advanced form values:", secondForm.getFieldsValue());

    // 显示一个成功的提示
    alert("操作已完成！");
  };

  return (
    <div className="stepped-modal-demo">
      <Title level={2}>步骤式对话框</Title>
      <Paragraph>
        步骤式对话框组件结合了 Modal 和 Steps
        组件，适用于分步骤引导、表单填写等场景。
        它提供了顶部步骤条和底部导航按钮，方便用户了解当前进度和操作。
      </Paragraph>

      <Divider />

      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="基础用法" key="basic">
          <Card>
            <Title level={4}>用户信息设置向导</Title>
            <Paragraph>
              分步收集用户信息和偏好设置的示例。包含验证、表单数据保持等功能。
            </Paragraph>
            <Button type="primary" onClick={showModal}>
              打开基础步骤对话框
            </Button>
          </Card>
        </TabPane>

        <TabPane tab="高级用法" key="advanced">
          <Card>
            <Title level={4}>项目创建向导</Title>
            <Paragraph>
              更复杂的表单向导示例，展示项目创建流程，包含选项卡、条件渲染等高级功能。
            </Paragraph>
            <Button type="primary" onClick={showModal}>
              打开高级步骤对话框
            </Button>
          </Card>
        </TabPane>
      </Tabs>

      <Divider />

      <Card className="code-card">
        <Title level={4}>使用方法</Title>
        <pre className="code-block">
          {`import { SteppedModal } from '@/components';

const [visible, setVisible] = useState(false);
const [form] = Form.useForm();

// 定义步骤配置
const steps = [
  {
    title: '第一步',
    description: '填写基本信息',
    content: (
      <Form form={form}>
        <Form.Item name="name" label="姓名">
          <Input />
        </Form.Item>
      </Form>
    ),
    icon: <UserOutlined />,
  },
  // 更多步骤...
];

// 渲染组件
<SteppedModal
  title="分步骤表单"
  visible={visible}
  onCancel={() => setVisible(false)}
  onFinish={handleFinish}
  steps={steps}
  onStepChange={handleStepChange}
/>
`}
        </pre>
      </Card>

      {/* 渲染对话框 */}
      <SteppedModal
        title={activeTab === "basic" ? "用户信息设置向导" : "项目创建向导"}
        visible={visible}
        onCancel={handleCancel}
        onFinish={handleFinish}
        steps={activeTab === "basic" ? basicSteps : advancedSteps}
        onStepChange={handleStepChange}
      />
    </div>
  );
};

export default SteppedModalDemo;
